<template>
  <div id="experts" class="main" v-loading="loading">
    <div class="contaier">
      <div class="teach-team curr">
        <div v-for="item in expertsTeamList" :key="item.id" class="team-item">
          <div class="left-head">
            <img
              style="width: 110px; height: 110px; border-radius: 50%"
              :src="item.picUrl"
              alt=""
            />
          </div>
          <div class="df" style="flex: 1; justify-content: space-between">
            <div style="margin: 0 40px 0 20px; flex: 1">
              <div class="right-brief">
                <div
                  class="name f20"
                  style="font-weight: bold"
                  @click="handleTeacher(item)"
                >
                  {{ item.name }}
                </div>
                <div class="year f14" style="margin: 0 20px">
                  从业{{ item.expierences }}年
                </div>
                <div class="stars">
                  <el-rate
                    disabled
                    v-model="item.stars"
                    style="margin-bottom: 3px"
                  />
                </div>
              </div>
              <div class="f12" style="margin: 10px 0">
                <el-tag
                  style="margin-right: 10px"
                  size="small"
                  v-for="tag in JSON.parse(item.specialty)"
                  :key="tag"
                  >{{ tag }}</el-tag
                >
              </div>
              <div class="f14" style="color: #666">{{ item.intro }}</div>
            </div>
            <div class="my-button" @click="handleSub(item)">
              {{ item.isReserve ? '已预约' : '预约' }}
            </div>
          </div>
        </div>
        <div style="text-align: center" v-if="expertsTeamList.length <= 0">
          暂无数据
        </div>
      </div>
      <div style="width: 300px">
        <div class="right-card">
          <div class="df">
            <div class="bar"></div>
            <div class="bar-title">
              <div class="font-weight800 f20">服务项目推荐</div>
              <div
                class="f14 curr"
                style="color: var(--color-text)"
                @click="handleMore"
              >
                更多
              </div>
            </div>
          </div>
        </div>
        <div
          @click="handleCard(item)"
          class="card-item curr"
          v-for="item in shopServeList"
          :key="item.id"
        >
          <img
            style="width: 95px; height: 80px; margin-right: 10px"
            :src="item.picUrl"
            alt=""
          />
          <div>
            <div>{{ item.name }}</div>
            <div style="color: #f56c6c">
              <span class="f14">￥</span>
              <span class="f20">{{ item.realPrice }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <teacher-det-mask ref="teacherMaskRef" @handleExperts="handleExperts" />
    <loginCard ref="loginCardRef" />
  </div>
</template>

<script setup>
import teacherDetMask from './components/TeacherDetMask';
import { getExpertsTeamList, getGoodsList } from '@/api/shopServe/shopServe';
import { getReserveExperts, getExpertsTeamDetail } from '@/api/experts/experts';

import loginCard from '@/components/LoginCard';

import { ElMessage } from 'element-plus';
import { useStore } from 'vuex';
import { useRouter } from 'vue-router';
import { getToken } from '@/utils/auth';
import { ref } from 'vue';

const router = useRouter();
const loginCardRef = ref('');

const store = useStore();
const teacherMaskRef = ref(null);
const loading = ref(false);

const expertsTeamList = ref([]);
const handleTeacher = (item) => {
  fetchExpertsTeamDetail(item.id);
};
const handleExperts = (teacherData) => {
  expertsData.value.experNumId = teacherData.id;
  expertsData.value.expertName = teacherData.name;
  fetchReserveExperts();
};
const fetchExpertsTeamDetail = (id) => {
  getExpertsTeamDetail({
    id,
    studentMobile: store.getters.user.userInfo.phone,
  }).then((res) => {
    if (res.data.code == 20000) {
      teacherMaskRef.value.handleChangeMask(true, res.data.data);
    }
  });
};
const handleMore = () => {
  router.push({
    path: '/shopServe',
  });
};
const handleCard = (item) => {
  router.push({
    path: '/shopserve/shopDet',
    query: {
      id: item.id,
    },
  });
};
const fetchExpertsTeamList = () => {
  let data = {
    studentMobile: store.getters.user.userInfo.phone,
  };
  loading.value = true;
  getExpertsTeamList(data)
    .then((res) => {
      if (res.data.code == 20000) {
        expertsTeamList.value = res.data.data;
        loading.value = false;
      } else {
        loading.value = false;
      }
    })
    .catch(() => {
      loading.value = false;
    });
};
const shopServeList = ref([]);
const fetchGoodsList = () => {
  getGoodsList()
    .then((res) => {
      if (res.data.code == 20000) {
        shopServeList.value = res.data.data.slice(0, 3);
      }
    })
    .catch(() => {});
};

const handleSub = (item) => {
  if (!getToken()) {
    loginCardRef.value.handleVisibleShow();
  } else {
    if (item.isReserve) {
      ElMessage('你已预约');
      return;
    } else {
      expertsData.value.experNumId = item.id;
      expertsData.value.expertName = item.name;
    }
    fetchReserveExperts();
  }
};
const expertsData = ref({
  source: 'PC',
  experNumId: '',
  expertName: '',
  studentName: store.getters.user.userInfo.nick,
  studentMobile: store.getters.user.userInfo.phone,
});
const fetchReserveExperts = () => {
  getReserveExperts(expertsData.value).then((res) => {
    if (res.data.code == 20000) {
      ElMessage({
        message: res.data.msg,
        type: 'success',
      });
      fetchExpertsTeamList();
    }
  });
};
fetchGoodsList();
fetchExpertsTeamList();
</script>

<style lang="scss" scoped>
#experts {
  margin-top: 20px;
  .contaier {
    display: flex;
    .right-card {
      width: 300px;
      .bar {
        height: 24px;
        border-left: 4px solid var(--color-text);
        padding-left: 10px;
      }
      .bar-title {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
    }
  }
  .teach-team {
    margin-right: 40px;
    flex: 1;
    .team-item {
      display: flex;
      //   align-items: center;
      margin: 20px 0 10px 0;
    }
    .right-brief {
      display: flex;
      align-items: center;
      //   justify-content: space-between;
    }
    .my-button {
      width: 76px;
      height: 32px;
      text-align: center;
      border-radius: 4px;
      color: #fff;
      background: var(--color-text);
      line-height: 20px;
      padding: 6px 0;
    }
  }
  .card-item {
    margin: 20px 0;
    display: flex;
  }
}
</style>
